<template>
	<div :class="prefixCls" style="width: 100%">
		<div :class="`${prefixCls}-table-header-top`" v-if="$slots.headerTop">
			<slot name="headerTop"></slot>
		</div>
		<div class="flex">
			<slot name="tableTitle" v-if="$slots.tableTitle"></slot>
			<table-title
				v-if="!$slots.tableTitle && title"
				:title="title"
				:helpMessage="titleHelpMessage"
			></table-title>
			<div :class="`${prefixCls}__toolbar`">
				<slot name="toolbar"></slot>
				<!-- TODO: 增加常用的toolbar -->
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import { useDesign } from '@/hooks/web/useDesign';
import type { PropType } from 'vue';
import { defineComponent } from 'vue';
import TableTitle from './TableTitle.vue';

export default defineComponent({
	name: 'BasicTableHeader',
	components: { TableTitle },
	props: {
		title: {
			type: [Function, String] as PropType<string | ((data?: Recordable) => string)>,
		},
		titleHelpMessage: {
			type: [String, Array] as PropType<string | string[]>,
			default: '',
		},
	},
	setup() {
		const { prefixCls } = useDesign('basic-table-header');
		return {
			prefixCls,
		};
	},
});
</script>

<style lang="less">
@prefix-cls: ~'@{namespace}-basic-table-header';
.@{prefix-cls} {
	.flex {
		display: flex;
	}
	&__toolbar {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		> * {
			margin-right: 8px;
		}
	}
}
</style>
